<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="cooperation-page min-h-screen bg-main1">
    <!-- Header Section with Gradient Background -->
    <view class="pt-12 pb-20 px-4 text-center">
      <view class="text-3xl font-bold text-white mb-2">成为合作伙伴</view>
      <view class="text-lg text-white/90">与邻里生活荟一起开创社区商业新机遇</view>
    </view>

    <!-- Benefits Grid Section -->
    <view class="px-4 -mt-12">
      <view class="bg-white rounded-lg shadow-xl-lg p-4 grid grid-cols-2 gap-4">
        <view class="benefit-card text-center p-4">
          <view
            class="w-14 h-14 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-3"
          >
            <!-- <Store class="w-7 h-7 text-orange-500" /> -->
            <i class="iconfont icon-dianpu w-7 text-7 text-orange-500"></i>
          </view>
          <view class="font-bold text-gray-800 mb-1">商业赋能</view>
          <view class="text-sm text-gray-600">连接社区流量，提升商业价值</view>
        </view>

        <view class="benefit-card text-center p-4">
          <view
            class="w-14 h-14 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-3"
          >
            <!-- <Users class="w-7 h-7 text-orange-500" /> -->
            <i class="iconfont icon-yonghu w-7 text-7 text-orange-500"></i>
          </view>
          <view class="font-bold text-gray-800 mb-1">精准触达</view>
          <view class="text-sm text-gray-600">直达社区用户，精准营销推广</view>
        </view>

        <view class="benefit-card text-center p-4">
          <view
            class="w-14 h-14 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-3"
          >
            <i class="iconfont icon-zengchang w-7 text-7 text-orange-500"></i>
          </view>
          <view class="font-bold text-gray-800 mb-1">增长助力</view>
          <view class="text-sm text-gray-600">专业运营支持，助力业务增长</view>
        </view>

        <view class="benefit-card text-center p-4">
          <view
            class="w-14 h-14 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-3"
          >
            <i class="iconfont icon-cooperation w-7 text-7 text-orange-500"></i>
          </view>
          <view class="font-bold text-gray-800 mb-1">共赢生态</view>
          <view class="text-sm text-gray-600">构建合作生态，实现互利共赢</view>
        </view>
      </view>
    </view>

    <!-- Cooperation Methods Section -->
    <view class="mt-10 px-4">
      <view class="text-2xl font-bold text-center text-gray-800 mb-8">合作方式选择</view>

      <view class="space-y-6 grid grid-rows-2">
        <!-- Method 1: Merchant Settlement -->
        <view class="bg-white rounded-lg shadow-xl p-4" @click="toPage('/pages/join/index')">
          <view class="flex items-start">
            <view
              class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0"
            >
              <!-- <Store class="w-6 h-6 text-orange-500" /> -->
              <i class="iconfont icon-dianpu w-7 text-7 text-orange-500"></i>
            </view>
            <view class="flex-1">
              <view class="text-xl font-bold text-gray-800 mb-2">商家入驻</view>
              <view class="text-gray-600 mb-4">
                适合各类线下实体商家，包括餐饮、超市、美容美发、家政服务等
              </view>
              <view
                class="bg-orange-500 text-white px-6 py-2 rounded-full font-medium hover:bg-orange-600 transition-colors"
                @click="toPage"
              >
                立即入驻
              </view>
            </view>
          </view>
        </view>

        <!-- Method 2: Activity Cooperation -->
        <view class="bg-white rounded-lg shadow-xl p-4" @click="toPage('/pages/join/index')">
          <view class="flex items-start">
            <view
              class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0"
            >
              <!-- <Calendar class="w-6 h-6 text-orange-500" /> -->
              <i class="iconfont icon-fenxiang w-7 text-7 text-orange-500"></i>
            </view>
            <view class="flex-1">
              <view class="text-xl font-bold text-gray-800 mb-2">活动合作</view>
              <view class="text-gray-600 mb-4">适合品牌推广、新品发布、社区营销活动等合作需求</view>
              <view
                class="bg-orange-500 text-white px-6 py-2 rounded-full font-medium hover:bg-orange-600 transition-colors"
              >
                活动申请
              </view>
            </view>
          </view>
        </view>

        <!-- Method 3: Resource Sharing -->
        <view class="bg-white rounded-lg shadow-xl p-4" @click="toPage('/pages/join/index')">
          <view class="flex items-start">
            <view
              class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0"
            >
              <!-- <Share2 class="w-6 h-6 text-orange-500" /> -->
              <i class="iconfont icon-rili w-7 text-7 text-orange-500"></i>
            </view>
            <view class="flex-1">
              <view class="text-xl font-bold text-gray-800 mb-2">资源共享</view>
              <view class="text-gray-600 mb-4">适合媒体、渠道、社群等资源方，共创互利共赢生态</view>
              <view
                class="bg-orange-500 text-white px-6 py-2 rounded-full font-medium hover:bg-orange-600 transition-colors"
              >
                洽谈合作
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- Cooperation Process Section -->
    <view class="mt-10 px-4">
      <view class="text-2xl font-bold text-center text-gray-800 mb-8">合作流程</view>

      <view class="relative">
        <!-- Process Steps -->
        <view
          class="hidden sm:block absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-orange-200"
        ></view>

        <view class="space-y-6 grid grid-rows-2">
          <!-- Step 1 -->
          <view class="flex flex-col sm:flex-row items-center">
            <view
              class="flex items-center justify-center w-12 h-12 rounded-full bg-orange-500 text-white font-bold text-lg z-10"
            >
              1
            </view>
            <view class="mt-4 sm:mt-0 sm:ml-6 text-center sm:text-left">
              <view class="text-lg font-bold text-gray-800">提交申请</view>
              <view class="text-gray-600">填写合作申请表，提交基本信息</view>
            </view>
          </view>

          <!-- Step 2 -->
          <view class="flex flex-col sm:flex-row items-center">
            <view
              class="flex items-center justify-center w-12 h-12 rounded-full bg-orange-500 text-white font-bold text-lg z-10"
            >
              2
            </view>
            <view class="mt-4 sm:mt-0 sm:ml-6 text-center sm:text-left">
              <view class="text-lg font-bold text-gray-800">资质审核</view>
              <view class="text-gray-600">平台对商家资质进行审核</view>
            </view>
          </view>

          <!-- Step 3 -->
          <view class="flex flex-col sm:flex-row items-center">
            <view
              class="flex items-center justify-center w-12 h-12 rounded-full bg-orange-500 text-white font-bold text-lg z-10"
            >
              3
            </view>
            <view class="mt-4 sm:mt-0 sm:ml-6 text-center sm:text-left">
              <view class="text-lg font-bold text-gray-800">签约合作</view>
              <view class="text-gray-600">审核通过后签署合作协议</view>
            </view>
          </view>

          <!-- Step 4 -->
          <view class="flex flex-col sm:flex-row items-center">
            <view
              class="flex items-center justify-center w-12 h-12 rounded-full bg-orange-500 text-white font-bold text-lg z-10"
            >
              4
            </view>
            <view class="mt-4 sm:mt-0 sm:ml-6 text-center sm:text-left">
              <view class="text-lg font-bold text-gray-800">开通服务</view>
              <view class="text-gray-600">平台开通商家后台，开始运营</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- Contact Us Section -->
    <view class="mt-10 px-4">
      <view class="text-2xl font-bold text-center text-gray-800 mb-6">联系我们</view>

      <view class="bg-white rounded-lg shadow-xl p-4">
        <view class="space-y-4">
          <view class="flex items-center">
            <!-- <Phone class="w-5 h-5 text-orange-500 mr-3" /> -->
            <i class="iconfont icon-dianhua w-7 text-7 text-orange-500"></i>
            <text class="text-gray-700">400-123-4567</text>
          </view>

          <view class="flex items-center">
            <!-- <Mail class="w-5 h-5 text-orange-500 mr-3" /> -->
            <i class="iconfont icon-liuyan w-7 text-7 text-orange-500"></i>

            <text class="text-gray-700">cooperation@neighborhood.com</text>
          </view>

          <view class="flex items-center">
            <!-- <MapPin class="w-5 h-5 text-orange-500 mr-3" /> -->
            <i class="iconfont icon-zuobiao w-7 text-7 text-orange-500"></i>
            <text class="text-gray-700">上饶市信州区创业大厦15楼1501室</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// Form data
const form = ref({
  name: '',
  phone: '',
  company: '',
  intention: '',
  message: '',
})

const isSubmitting = ref(false)

// Form submission
const submitForm = () => {
  isSubmitting.value = true

  // Simulate API call
  setTimeout(() => {
    alert('感谢您的咨询，我们将尽快与您联系！')

    // Reset form
    form.value = {
      name: '',
      phone: '',
      company: '',
      intention: '',
      message: '',
    }

    isSubmitting.value = false
  }, 1500)
}

const toPage = (url = '/pages/mine/invite') => {
  uni.navigateTo({
    url,
  })
}
</script>

<style scoped>
.cooperation-page {
  background-color: #f8f9fa;
}

@media (min-width: 640px) {
  .benefit-card {
    padding: 1.5rem;
  }
}
</style>
